<template>
    <div class="comment-list">
        <!-- 用户评论 start -->
        <div class="comment-item" v-for="(item, index) in list" :key="index">
            <div class="user-img">
                <img :src="`./imgs/users/${item.userImg}`">
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>{{ item.name }}</span>
                    <div class="film-source">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">7.9</span>
                    </div>
                </div>
                <div class="user-time">{{ item.time }}</div>
            </div>
            <div class="user-conent">{{ item.msg }}</div>
        </div>
        <!-- 用户评论 end -->
    </div>
</template>
<script>
    Vue.component("CommentList",{
        template:document.currentScript.ownerDocument.querySelector("template"),
        props:{
            list:{
                type:Array,
                required:true,
                default(){
                    return [];
                }
            }
        }
    })

</script>